<template>
    <div class="big">
        <div class="listbox" ref="listbox">
            <div class="list" v-if="showBg">
                <div data-type="0" class="listchild" v-for="(item,index) in couponList" :key="index">
                    <div class="imgshou">
                        <check-icon :value.sync="item.selectbox" @click.native="clicks(item.selectbox)"></check-icon>
                        <div class="conts">
                            <p class="couponName">{{item.couponName}}</p>
                            <p>
                                <span>数量:{{item.num}}</span>
                                <span ref="number">
                                    <x-number v-model="item.number" :min="1" @on-change="change(item.number,item)" class="xnumber" width="30px" ref="xnumber" :fillable=true :max="item.num"></x-number>
                                </span>
                            </p>
                            <p class="guige">
                                有效期：{{item.validatyBeginDes}}到{{item.validatyEndDes}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <show-bg-img :isShow="!showBg"></show-bg-img>
        </div>
        <diV class="shopfoot" v-if="showBg">
            <div class="confoot">
                <div class="left">
                    <div class="one">
                        <check-icon :value.sync="checkall" @click.native="selected(checkall)"></check-icon>
                        <p>{{checkall?"取消全选":"全选"}}</p>
                    </div>
                </div>
                <div class="button" @click="settlement()">
                    提交申请
                </div>
            </div>
        </diV>
        <div class="cont"></div>
        <!-- 注册手机号弹窗 -->
        <RegPhone :isShow="phoneState" @cancel="phoneState=false" @confirm="phoneState=false"></RegPhone>
    </div>
</template>
<script>
// 1实物 2彩票 3券
// payMethod
// 1-RMB
// 2-积分
// 3-RMB+积分
import { XNumber,CheckIcon } from "vux";
import { MessageBox, Toast } from "mint-ui";
import RegPhone from 'common/regPhone/index.vue';
import {
    queryMchtCouponList,
    commitCouponApply
} from "src/methods/request.js";
import mixins from 'mixins';
export default {
    mixins:[mixins],
    data() {
        return {
            checkall: false,
            bottomlist: [],
            shopprice: 0,
            couponList: [],
            phoneState: false,
            phoneTxt_phone: "",
            phoneTxt_name: ""
        };
    },
    components: {
        XNumber,
        RegPhone,
        CheckIcon,
    },
    created() {
        this.getShopdata();
    },
    methods: {
        //点击监听用户操作
        clicks(val) {
            this.checkall = this.couponList.every(item => item.selectbox == true );
        },
        selected(val){
            this.couponList.map(item=>{
                item.selectbox = val;
                return item;
            });
        },
        getShopdata() {
            this.$vux.loading.show({ text: "Loading" });
            queryMchtCouponList({}).then(response => {
                if (response.rspCode == "0000") {
                    this.couponList = response.data.mchtCouponInfoList.map(item => {
                        item.selectbox = false;
                        return item;
                    });
                    this.showBg = this.couponList.length == 0 ? false : true;
                } else {
                    Toast({ message: "请求失败", position: "bottom", duration: 1000 });
                }
                this.$vux.loading.hide();
            }).catch(error => {
                this.$vux.loading.hide();
            });
        },
        change(value, item) {
            if (value > item.num) {
                MessageBox("", "最多" + item.num + "份哟");
                value = item.num;
            }
        },
        //结算
        async settlement() {
            let shoparr = this.couponList.filter(item => item.selectbox);
            if (shoparr.length == 0) {
                MessageBox("", "请选择优惠券");
                return false;
            }
            for (var value of shoparr) {
                if (value.number == undefined || value.number == 0) {
                    MessageBox("", "优惠券数目不能为0");
                    return false;
                }
            }
            await commitCouponApply({ couponList: shoparr }).then(response => {
                if (response.rspCode == "0000") {
                    if (response.data.rspCode == "0000") {
                        MessageBox("", "申请成功！");
                        this.$router.push({ path: "/ApplicationAudit" });
                    } else if (response.data.rspCode == "7012") {
                        this.phoneState = true;
                    } else {
                        MessageBox("", response.data.rspMsg || "申请失败！");
                    }
                } else {
                    MessageBox("", "申请失败！");
                }
            }).catch(error => console.log(error));
        }
    }
};
</script>
<style lang="less" scoped>
@import "./../../css/ckecked.css";
@import "./index.less";
</style>